#main-wrap {
  --main-max-width: auto;
}

.board-editor {
  $board-width: calc((100vh - 4vmin) * var(--board-scale) * 0.8 - #{$site-header-outer-height});

  display: grid;
  grid-template-columns: minmax(0, $board-width);
  grid-template-areas: 'spare-top' 'board' 'spare-bottom' 'tools' 'copyables';

  @include breakpoint($mq-x-small) {
    grid-template-columns: minmax(30vmin, $board-width) 2vmin minmax(200px, 300px);
    grid-template-rows: min-content auto min-content;
    grid-template-areas: '.            . tools' 'spare-top    . tools' 'board        . tools' 'spare-bottom . tools' '.            . tools' 'copyables    . .    ';
  }
}
